<template>
  <div>
    <Header :left="true" leftText="返回" title="生产订单信息查询"> </Header>
    <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description">查询条件</NoticeBar>
    <div>
      <Form :style="autoHeight">
        <van-field class="formstyle" required v-model="query.POrderID" name="生产订单" label="生产订单" placeholder="输入生产订单" />
        <van-field class="formstyle" required v-model="query.MaterialID" name="物料代码" label="物料代码" placeholder="输入物料代码" />
        <van-field class="formstyle" required v-model="query.MaterialName" name="物料名称" label="物料名称"
          placeholder="输入物料名称" />
      </Form>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px">
      <van-button type="primary" class="buttongroup" @click="getUncheckedList" color="#138087">查询</van-button>
    </div>
    <div class="textScroll">
      <!-- 循环数据开始 -->
      <div v-for="item in itemsOne" :key="item.id">
        <div style="width: 100%; background-color: #f3f4f8; height: 5px">
          <span></span>
        </div>
        <div class="divStyle">
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18" style="color: #a9a9a9">生产订单:{{ item.POrderID }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18" style="color: #a9a9a9">物料代码:{{ item.MaterialID }}</van-col>
            <van-button color="#138087" @click.stop="confirmmessage(item)" style="
                width: 85px;
                height: 40px;
                font-size: 12px;
                position: absolute;
                left: 80%;
              " type="primary" text="选择" />
          </van-row>

          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18" style="color: #a9a9a9">物料名称:{{ item.MaterialName }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18" style="color: #a9a9a9">订单数:{{ item.POrderAmount }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="6"> </van-col>
            <van-col span="3"> </van-col>
            <van-col span="6"> </van-col>
          </van-row>
        </div>
      </div>
      <!-- 循环数据结束 -->
      <!-- <van-empty v-if="itemsOne == ''" image="search" description="暂无数据" /> -->
    </div>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "heyu5",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      showPickerpline: false,
      itemsOne: [],
      fromData: {},
      valuepline: "",
      item: {},
      form: {},
      query: {
        POrderID: "",
        MaterialID: "",
        MaterialName: "",
      },
      columnspline: [],
    };
  },

  created: function () {
    this.item = api.pageParam.item;
    this.form = api.pageParam.form;
    //this.item.valuepline = this.showPLineIDName(this.item.valueplineid);
  },
  async mounted() { },

  methods: {
    onConfirmpline(value, index) {
      this.query.Closed = this.columnspline[index].plineId;
      this.query.ClosedName = this.columnspline[index].plineName;
      this.showPickerpline = false;
    },

    //确认
    async confirmmessage(form) {
      let _this = this;

      api.openWin({
        name: "tightfill",
        url: "./tightenup-tightfill.html",
        pageParam: {
          item: this.item,
          form: form,
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 1000);
    },
    //查询未确审核调机数据
    async getUncheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/ProductionOrder/GetList?POrderID=" +
          _this.query.POrderID +
          "&MaterialID=" +
          _this.query.MaterialID +
          "&MaterialName=" +
          _this.query.MaterialName
        );
        Toast.clear();
        _this.itemsOne = res.Data;
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
.message {
  font-size: 20px;
  margin-top: 10px;
  margin-left: -10px;
  font-weight: bold;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 39%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}
</style>
